<html>

<head>
	<title>Наша страница</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script>
		
		//TODO: Дать более говорящие названия переменным
		var allBalls = [];
		var b = [];
		var p = 50; //коэффициент масштаба
		var k = 10; //кол-во клеток
		var offsetX = 20;
		var offsetY = 120;
		var NUM_NEW_BALLS = 3;
		var colors = [
				"#ffffff", /* Белый */
				"#ff0000", /* Красный */
				"#fcff00", /* Желтый */
				"#00ff0c", /* Зеленый */
				"#0000ff", /* Синий */
				"#cc00ff" /* Фиолетовый */	];
		
		var listDelBalls = [];
		var canvas;
		var selected = {
			col: -1, row: -1};
				
		function onLoadFunc()
		{
			/* Обнуление двумерного массива 10х10 */
			for(col=0; col<k; col++)
			{	
//				listDelBalls[col] = [];
				allBalls[col] = [];
				for(row=0; row<k; row++)
					allBalls[col][row] = 0;
			}
			
			canvas = document.getElementById('myCanvas');
			
			/* Произвольные начальные значения */
			addBalls(NUM_NEW_BALLS);
		}
		
		function circle(col,row,context,c)
		{
			var x = p/2+p*col;
			var y = p/2+p*row;
			context.beginPath();
			context.arc(x,y,(p-5)/2,0,2*Math.PI,true);
			context.fillStyle = colors[c];
			context.closePath();
			context.fill();
		}

		function drawAll()
    {
			var context = canvas.getContext('2d');	              
			
			/* Рисование сетки */
			context.strokeStyle = "#000000";
			context.lineWidth = 1;

			for(col=0; col<k; col++)
				for(row=0; row<k; row++)
					context.strokeRect(col*p, row*p, p, p);
					
			context.fillStyle="#000000";
			context.strokeStyle="#000000";
			context.fillRect(selected.col * p, selected.row * p, p, p);
			context.strokeRect(selected.col * p, selected.row * p, p, p);
						
			/* Обводка сетки */
			context.strokeStyle = "#666666";
			context.lineWidth = 4;
			context.strokeRect(1, 1, k*p, k*p);
			
			/* Отрисовка массива */
			for(col=0; col<k; col++)
				for(row=0; row<k; row++)
					circle(col, row, context, allBalls[col][row]);
						
		}
		
		function onCanvasClick(event)
		{
			var context = canvas.getContext('2d');
			local = getLocalCoords(event);
			var col, row;
			col = Math.floor(local.x/p);
			row = Math.floor(local.y/p);
			if ((col>9)||(row>9)) 
			{ return; }
			
			if ((selected.col == col)&&(selected.row == row))
			{
				selected.col = -1;
				selected.row = -1;
			}
			else if (allBalls[col][row] != 0)
			{
				selected.col = col;
				selected.row = row;
			}
			if ((selected.col != -1)&&(selected.row != -1)&&(allBalls[col][row] == 0))
			{
				allBalls[col][row] = allBalls[selected.col][selected.row];
				allBalls[selected.col][selected.row] = 0;
				selected.col = -1;
				selected.row = -1;
				newBalls = [];
				newBalls = addBalls(NUM_NEW_BALLS);
				var newBallsLen = newBalls.length;
				newBalls[newBallsLen] = [];
				newBalls[newBallsLen][0] = col;
				newBalls[newBallsLen][1] = row;
				checkLines(newBalls);
			}
						
			context.clearRect(0,0,p*11,p*11);
			drawAll();
		}
		
		function getLocalCoords(event)
		{
			return  {
				x: event.clientX - offsetX,
				y: event.clientY - offsetY	
			};
		}
		
		function addBalls(balls)
		{
			var newBalls = [];
			for(var i=0; i<balls; i++)
			{		
				if (i<0)
				{
						break;
				}
				var m = Math.floor(Math.random()*100) % 10;
				var n = Math.floor(Math.random()*100) % 10; 
				if (allBalls[m][n] == 0)	
				{
					allBalls[m][n] = Math.floor(Math.random()*100) % 5 + 1;
					newBalls[i] = [];
					newBalls[i][0] = m;
					newBalls[i][1] = n;
				}	
				else 
				{ 
					i--; 
				} 
			}	 
			return newBalls;
		}
		
		function checkLines(newBalls)																	/* Общая функция проверки и удаления */
		{
                    listDelBalls = [];
			for (var i=0; i < newBalls.length;i++)
			{
				checkRow(newBalls[i][0], newBalls[i][1], 1, 0);
				checkRow(newBalls[i][0], newBalls[i][1], 0, 1);
				checkRow(newBalls[i][0], newBalls[i][1],1,1);  
				checkRow(newBalls[i][0], newBalls[i][1], 1, -1);
			}
			/* Удаление */
			 
			for(var i=0; i < listDelBalls.length; i++)
			{
				if(listDelBalls[i][0] == listDelBalls[i][2]) 
				{
					for(var j = listDelBalls[i][1]; j<=listDelBalls[i][3]; j++)
					{
						allBalls[listDelBalls[i][0]][j] = 0;
					}
				}
				
			if(listDelBalls[i][1] == listDelBalls[i][3]) 
			{
				for(var j = listDelBalls[i][0]; j<=listDelBalls[i][2]; j++)
				{
					allBalls[j][listDelBalls[i][1]] = 0;
				}
			}else
			if(listDelBalls[i][2] > listDelBalls[i][0])
			{
				for(var j=listDelBalls[i][0], k=listDelBalls[i][1]; j <= listDelBalls[i][2], k <= listDelBalls[i][3]; j++, k++)
				{
					allBalls[j][k] = 0;
				}
			}
			
			if(listDelBalls[i][0] > listDelBalls[i][2])
			{
				for(var j=listDelBalls[i][0], k=listDelBalls[i][1]; j >= listDelBalls[i][2], k <= listDelBalls[i][3]; j--, k++)
				{
					allBalls[j][k] = 0;
				}
			}
			if(listDelBalls[i][1] > listDelBalls[i][3])
			{
				for(var j=listDelBalls[i][2], k=listDelBalls[i][3]; j >= listDelBalls[i][0], k <= listDelBalls[i][1]; j--, k++)
				{
					allBalls[j][k] = 0;
				}
			}
		 }

		}
		
		function checkRow(sx, sy, dx, dy)// +-1, +-1, 0, 0
		{
			var cx = sx;
			var cy = sy;
			var l = 1;
			while (ifInsideRect(cx, cy) && ifInsideRect(cx - dx, cy -dy) &&(allBalls[cx][cy] == allBalls[cx-dx][cy-dy]))
			{
				cx -= dx;
				cy -= dy;
				l++;
			}
			var x1 = cx;
			var y1 = cy;
			
			cx = sx;
			cy = sy;
			while (ifInsideRect(cx, cy) && ifInsideRect(cx + dx, cy + dy)&&(allBalls[cx][cy] == allBalls[cx+dx][cy+dy]))
			{
				cx += dx;
				cy += dy;
				l++;
			}
			var x2 = cx;
			var y2 = cy;
			
			if (l >= 5) 
			{
			  listDelBalls[listDelBalls.length] = [x1, y1, x2, y2];
			}
		}
		
		function ifInsideRect(col, row)
		{
			return col >= 0 && col < k && row >= 0 && row < k;
		}
		
		
		
		
	
	</script>
	<style>
		h1,h2,h3,h4,h5,h6
		{
			color: green;	
			font-family: "Comic Sans MS", sans-serif;
		}
		#myCanvas
		{
			position:fixed;
			top: 120px;
			left: 20px;
		}
		#about
		{
			float:right;
		}
	</style>
</head>

<body onload = "onLoadFunc()">
		<div id="about">
		<p>
			Разработали Кипкаев Дамир и Лунёва Яна.<br/>
			<a href="http://schoolmit.ru">ШМИТ</a>. Январь, 2011.<br>
			<a href="http://www.progschool.ru/index.php/ШП/Portfolio/SchoolMIT2011#.D0.9A.D0.B8.D0.BF.D0.BA.D0.B0.D0.B5.D0.B2_.D0.94.D0.B0.D0.BC.D0.B8.D1.80.2C_.D0.9B.D1.83.D0.BD.D1.91.D0.B2.D0.B0_.D0.AF.D0.BD.D0.B0_.D0.B8_.D0.B8.D0.B3.D1.80.D0.B0_Lines">Описание проекта</a> на сайте Школы программиста.
		</div>
	<h1>JavaScript: project - LINES</h1>
	<form>
		<input type="button" value="DRAW" onClick="drawAll()">		
	</form>
	<canvas id="myCanvas" width="1200" height="540" onclick="onCanvasClick(event)"></canvas>
</body>
</html>
